// 提示框
$(function () {
    $('#age').attr('data-content', "近一半的独居老人都属于70- 79岁的中龄老年人；在80岁及以上的高龄独居老人中，城市独居老人占比最大。65- 69 岁的低龄独居老人中，乡村独居老人占比最大。");
    $('#gender').attr('data-content', "独居老人以女性居多，城市独居老人的女性化趋势更为突出。对于不同年龄段而言，独居老人中男性的比例随年龄增长逐渐降低，而女性的比例逐渐升高。");
    $("#typeA").attr("data-content", "<p>场所：老人家中</p>" +
        "<p>优点：成本较低；老人无需更改住所；家人可陪伴时间较长</p>" +
        "<p>缺点：老人难以得到专业细致的护理；医疗保健无法及时满足</p>");
    $("#typeB").attr("data-content", "<p>场所：家庭附近社区</p>" +
        "<p>优点：成本较低；依托社区公共资源和服务设施；老人对所处环境更熟悉，更具亲切感</p>" +
        "<p>缺点：养老功能不全；服务能力不强</p>");
    $("#typeC").attr("data-content", "<p>场所：专业化养老机构</p>" +
        "<p>优点：居住环境无障碍；减轻子女负担；生活照料和医疗护理细致专业；群居可以排解孤独感</p>" +
        "<p>缺点：成本较高；监管困难，对发生在机构内的伤痕、死亡等重大问题没有相应明确的解决办法；老人需更改住所，容易增加失落感</p>");
    $('[data-toggle="popover"]').popover({html: true});
    $('[data-toggle="tooltip"]').tooltip();
});

// 近十年独居老人相关报道数量变化
let newsReportCountChart = echarts.init(document.getElementById("newsReportCountChart"), 'customed');
newsReportCountChart.setOption({
    title: [
        {
            text: "近十年主流媒体关于独居老人的报道数量变化",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：人民日报、新华网、中国老年报等主流媒体",
            right: '10%',
            bottom: 0

        }
    ],
    tooltip: {
        formatter: "{b}年: {c}"
    },
    xAxis: {
        type: 'category',
        data: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019]
    },
    yAxis: {
        type: 'value'
    },
    grid: {
        top: 80
    },
    series: [
        {
            type: 'line',
            color: '#455a64',
            data: [3320, 4408, 5707, 6994, 7869, 7494, 7806, 7431, 7657, 8613],
            areaStyle: {
                // color: 'rgba(128, 128, 128, 0.5)'
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#607d8b'
                    }, {
                        offset: 1, color: '#cfd8dc'
                    }],
                    global: false
                }
            }
        }
    ]
})


// 地图数据
let dataList = [
    {name: '北京', value: 730261},
    {name: '天津', value: 483217},
    {name: '河北', value: 2873074},
    {name: '山西', value: 1356930},
    {name: '内蒙古', value: 910556},
    {name: '辽宁', value: 1992382},
    {name: '吉林', value: 1088121},
    {name: '黑龙江', value: 1486670},
    {name: '上海', value: 976043},
    {name: '江苏', value: 3888399},
    {name: '浙江', value: 2657453},
    {name: '安徽', value: 2934620},
    {name: '福建', value: 1652877},
    {name: '江西', value: 1827551},
    {name: '山东', value: 4284534},
    {name: '河南', value: 3782040},
    {name: '湖北', value: 2575364},
    {name: '湖南', value: 3374368},
    {name: '广东', value: 3893992},
    {name: '广西', value: 2289631},
    {name: '海南', value: 359523},
    {name: '重庆', value: 1791342},
    {name: '四川', value: 4772272},
    {name: '贵州', value: 1588428},
    {name: '云南', value: 1935997},
    {name: '西藏', value: 97930},
    {name: '陕西', value: 1614811},
    {name: '甘肃', value: 1080706},
    {name: '青海', value: 196778},
    {name: '宁夏', value: 192913},
    {name: '新疆', value: 776621},
    {name: '台湾', value: 0},
    {name: '南海诸岛', value: 0},
    {name: '香港', value: 0},
    {name: '澳门', value: 0},
];

// 1. 地图图表
let mapChart = echarts.init(document.getElementById("map"), 'customed');
mapChart.setOption({
    title: {
        subtext: "数据来源：第六次人口普查",
        bottom: 0,
        right: '10%'
    },
    tooltip: {
        formatter: function (params) {
            return params.name + ': ' + params.value
        }
    },
    visualMap: {
        type: "piecewise",
        min: 0,
        max: 5000000,
        left: 0,
        bottom: 0,
        showLabel: !0,
        pieces: [
            {gt: 4000000, label: "> 400万人", color: '#37474f'},
            {gte: 3000000, lte: 4000000, label: "300万 - 400万人", color: '#455a64'},
            {gte: 2000000, lte: 3000000, label: "200万 - 300万人", color: '#546e7a'},
            {gte: 1000000, lte: 2000000, label: "100万 - 200万人", color: '#607d8b'},
            {gte: 500000, lte: 1000000, label: "50万 - 100万人", color: '#78909c'},
            {gte: 1, lte: 500000, label: "< 50万人", color: 'rgba(120,144,156,0.84)'},
            {value: 0, label: "暂无数据", color: "#eceff1"}
        ]
    },
    geo: {
        map: 'china',
        roam: false,
        zoom: 1,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#eceff1',
                borderColor: "#ffffff"
            },
            emphasis: {
                areaColor: '#263238',
                borderColor: "#ffffff"
            }
        }
    },
    series: [
        {
            name: '独居老人数',
            type: 'map',
            coordinateSystem: 'geo',
            data: dataList,
            geoIndex: 0,
            label: {
                normal: {
                    formatter: '{b}',
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff'
                }
            }
        }
    ]
});

// 3. 独居老人人口变化
let populationLineChart = echarts.init(document.getElementById("populationLineChart"), 'customed');
populationLineChart.setOption({
    title: [
        {
            text: "2000年、2010年我国独居老年人口变化情况",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：第五次、第六次人口普查",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['全国', '乡村', '城市', '镇'],
        bottom: '20'
    },
    grid: {
        top: '80',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        data: ['第五次人口普查', '第六次人口普查']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '镇',
            type: 'bar',
            stack: '全国',
            data: [1008080, 2650254],
            barWidth: '60',
            color: '#263238'
        },
        {
            name: '城市',
            type: 'bar',
            stack: '全国',
            data: [1897553, 3667550],
            barWidth: '60',
            color: '#607d8b'
        },
        {
            name: '乡村',
            type: 'bar',
            stack: '全国',
            data: [4929507, 8121881],
            barWidth: '60',
            color: '#b0bec5',
            markLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#90a4ae'
                },
                label: {
                    show: false,
                    formatter: '{c}'
                },
                data: [
                    [{type: 'min'}, {type: 'max'}]
                ],
                animation: false
            }
        },
        {
            name: '全国',
            type: 'line',
            lineStyle: {
                opacity: 0
            },
            label: {
                show: true
            },
            data: [7835140, 14439685]
        }
    ]
});

// 4. 独居老人日常生活自理能力评估情况
let spirit = 'path://M512.032768 9.8304a83.44917333 83.44917333 0 1 1-83.44917333 83.44917333 83.460096 83.460096 0 0 1 83.44917333-83.44917333z m0 83.44917333l89.74062933 99.9424H422.37952c-80.478208 0-106.67076267 20.64384-106.67076267 108.35285334v256.24576c0 49.80736 67.18532267 49.80736 67.18532267 0l5.75624533-234.40042667h17.24689067v641.70666667a45.79874133 45.79874133 0 1 0 91.33533867 0l5.799936-372.46293334h18.10978133l5.7344 372.46293334a45.79874133 45.79874133 0 1 0 91.33533867 0v-641.70666667h17.22504533l5.799936 234.40042667c0 49.80736 67.076096 49.80736 67.076096 0v-256.24576c-0.05461333-87.70901333-26.148864-108.35285333-106.53969067-108.35285334z';
let selfEvaluateChart = echarts.init(document.getElementById("selfEvaluateChart"), 'customed');
selfEvaluateChart.setOption({
    title: [
        {
            text: "独居老人日常生活自理能力评估情况",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：2014年中国老年人长寿影响因素调查（CLHLS）",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        formatter: "{b}<br>{a}: {c}%"
    },
    xAxis: {
        show: false,
        max: 100
    },
    yAxis: {
        data: ['洗澡是否需要帮助', '能否乘坐公共交通工具', '能否独自外出买东西', '能否独自做饭', '能否独自洗衣'],
        inverse: true,
        axisTick: {show: false},
        axisLine: {show: false},
    },
    grid: {
        left: 150,
        bottom: '20'
    },
    series: [
        {
            name: "完全需要帮助",
            type: 'pictorialBar',
            stack: '全国',
            itemStyle: {
                color: '#263238'
            },
            symbol: spirit,
            symbolRepeat: 'fixed',
            symbolMargin: '10%',
            symbolSize: [14, 35],
            symbolBoundingData: 100,
            symbolClip: true,
            data: [8.5, 32.7, 15.2, 12.2, 11.9],
            z: 20
        },
        {
            name: "需要一些帮助",
            type: 'pictorialBar',
            stack: '全国',
            itemStyle: {
                color: '#607d8b'
            },
            symbol: spirit,
            symbolRepeat: 'fixed',
            symbolMargin: '10%',
            symbolSize: [14, 35],
            symbolClip: true,
            symbolBoundingData: 100,
            data: [
                {
                    value: 12.2,
                    tooltip: {
                        formatter: "{b}<br>{a}: 3.7%"
                    }
                },
                {
                    value: 49.5,
                    tooltip: {
                        formatter: "{b}<br>{a}: 16.8%"
                    }
                },
                {
                    value: 24.8,
                    tooltip: {
                        formatter: "{b}<br>{a}: 9.6%"
                    }
                },
                {
                    value: 18.5,
                    tooltip: {
                        formatter: "{b}<br>{a}: 6.3%"
                    }
                },
                {
                    value: 18.5,
                    tooltip: {
                        formatter: "{b}<br>{a}: 6.6%"
                    }
                }
            ],
            z: 10
        },
        {
            name: "无需帮助",
            type: 'pictorialBar',
            stack: '全国',
            itemStyle: {
                color: '#b0bec5'
            },
            symbol: spirit,
            symbolRepeat: 'fixed',
            symbolMargin: '10%',
            symbolSize: [14, 35],
            // symbolClip: true,
            symbolBoundingData: 100,
            data: [87.8, 50.5, 75.2, 81.5, 81.5],
            z: 5
        }
    ]
});

// 6. 独居老人患病不去医院的原因
let reasonPieChart = echarts.init(document.getElementById("reasonPieChart"), 'customed');
reasonPieChart.setOption({
    title: [
        {
            text: "独居老人患病不去医院的原因",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：2014年中国老年人长寿影响因素调查（CLHLS）",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
    },
    series: [
        {
            name: '独居老人患病不去医院的原因',
            type: 'pie',
            radius: '70%',
            center: ['50%', '55%'],
            label: {
                show: true
            },
            data: [
                {name: '未回答', value: 25.8},
                {name: '无人陪伴', value: 21.9},
                {name: '没钱', value: 20.5},
                {name: '行动不便', value: 11.9},
                {name: '不愿意', value: 9.3},
                {name: '路途远', value: 7.3},
                {name: '其他', value: 3.3},
            ],
            roseType: 'radius'
        }
    ]
});

// 7. 独居老人月收入情况
let monthlyIncomeCircleChart = echarts.init(document.getElementById("monthlyIncomeCircleChart"), 'customed');
monthlyIncomeCircleChart.setOption({
    title: [
        {
            text: "独居老人月收入情况",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：2014年中国老年人长寿影响因素调查（CLHLS）",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
    },
    series: [
        {
            name: "独居老人月收入情况",
            type: 'pie',
            center: ['50%', '55%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            labelLine: {
                show: true
            },
            data: [
                {name: '500元以下', value: 658},
                {name: '500-1000元', value: 195},
                {name: '1000-1500元', value: 41},
                {name: '1500-2000元', value: 71},
                {name: '2000元以上', value: 255},
            ]

        }
    ]
});

// 8. 独居老人主要收入来源
let incomeSourceBarChart = echarts.init(document.getElementById("incomeSourceBarChart"), 'customed');
incomeSourceBarChart.setOption({
    title: [
        {
            text: "独居老人主要生活来源",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：2014年中国老年人长寿影响因素调查（CLHLS）",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
    },
    series: [
        {
            name: '',
            type: 'pie',
            center: ['50%', '55%'],
            radius: '70%',
            data: [
                {name: '家人', value: 741},
                {name: '退休金', value: 128},
                {name: '自己工作', value: 80},
                {name: '当地政府、社团', value: 176},
                {name: '其他亲属', value: 14},
                {name: '其他', value: 81},
            ]
        }
    ]
});

// 10. 独居老人自杀原因

// 11. 独居老人日常活动参与情况
let activityTreeMap = echarts.init(document.getElementById("activityTreeMap"), 'customed');
activityTreeMap.setOption({
    title: [
        {
            text: "独居老人日常活动参与情况",
            subtext: "鼠标移动到图表上显示更多信息",
            left: 'center'
        },
        {
            subtext: "数据来源：2014年中国老年人长寿影响因素调查（CLHLS）",
            right: '10%',
            bottom: 0
        }
    ],
    tooltip: {
        formatter: '{b}: {c}%'
    },
    series: [
        {
            name: "独居老人日常活动参与情况",
            type: 'treemap',
            label: {
                show: true,
                formatter: '{b}'
            },
            top: '70',
            bottom: '30',
            roam: false,
            nodeClick: false,
            breadcrumb: {
                show: false
            },
            data: [
                {name: "家务", value: 78.1},
                {name: "个人户外活动", value: 64.3},
                {name: "种花养鸟", value: 20},
                {name: "读书看报、上网", value: 14.7},
                {name: "打牌或打麻将", value: 16},
                {name: "看电视、听广播", value: 65.9},
                {name: "社会活动", value: 12.5}
            ]
        }
    ]
});

// APlayer 播放器
const ap = new APlayer({
    container: document.getElementById("player"),
    mini: true,
    autoplay: true,
    volume: 1,
    loop: 'none',
    preload: 'none',
    audio: [
        {
            url: 'http://mnisty.gitee.io/data-journalism-works/resources/audio/独居老人缩混.mp3',
            cover: 'https://wx2.sinaimg.cn/wap180/006d57iNly1ghzrcasz5jj30zg0u0e81.jpg',
        }
    ]
});
